<template>
  <el-form :model="login" class="border border-5 w-50 mx-auto mt-5 background">
    <div align="center" class="my-2">
      <img src="@/assets/hi.jpg" style="width: 100px; height: 100px" />
    </div>
    <el-form-item>
      <div class="mx-auto">用户登录</div>
    </el-form-item>

    <el-form-item>
      <el-input
        class="w-50 mx-auto"
        v-model="login.username"
        placeholder="账号"
        ></el-input
      >
    </el-form-item>

    <el-form-item>
      <el-input
        class="w-50 mx-auto"
        v-model="login.password"
        placeholder="密码"
      ></el-input>
    </el-form-item>
    <el-dropdown>
  <span class="el-dropdown-link">
    其他用户<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <template v-slot:dropdown>
  <el-dropdown-menu>
    <el-dropdown-item>管理员登录</el-dropdown-item>
    <el-dropdown-item>物业登录</el-dropdown-item>
  </el-dropdown-menu>
  </template>
</el-dropdown>
    <el-form-item>
      <el-button type="primary" class="mx-auto" @click="loginAction"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import auth from "@/tools/auth/auth.js";
export default {
  name: "LoginFrame",
  data() {
    return {
      radio: "1",
      login: {
        username: null,
        password: null,
      },
    };
  },
  mounted() {
    auth.logout();
  },
  methods: {
    loginAction() {
      this.$axios.post("/api/login", this.login).then((response) => {
        let data = response.data;
        if (data.code == 200) {
          let token = data.data;
          auth.saveToken(token);
          this.$router.push("/HomeFrame");
        } else {
          alert(data.msg);
        }
      });
    },
  },
};
</script>

<style>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
